<template>
    <div class="pnf">
        <h1>友情提醒</h1>
        <h3>当前页面不存在，请访问其他页面</h3>
        <button @click="jumpUrl">返回主页，{{ countdown }}秒后自动返回</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            countdown:5,
            timer:null
        }
    },
    methods:{
        jumpUrl(){
            // 跳转到主页
            this.$router.push('/nowplaying')
        }
    },
    created(){
        this.timer = setInterval(() => {
            if(this.countdown==0) this.jumpUrl()
            else this.countdown--
        }, 100);
    }, 
    destroyed() {
        if(this.timer) clearInterval(this.timer)
    },
}
</script>

<style lang="less" scoped>
    @import '../assets/Less/common.less';
    
    .pnf{
        width: 100vw;
        height: 100vh;
        background-color: @main_color;
        .flex();
        color: #fff;
        flex-direction: column;
        h1{
            margin: 15px 0;
        }
        button{
            margin: 10px 0;
            background-color: #fff;
            border: none;
            padding: 15px;
            border-radius: 10px;
            color: @main_color;
        }
    }
</style>